<template>
  <div class="faq-container">
    <h2 class="faq-title">常见问题解答</h2>
    <p class="faq-subtitle">在这里您可以找到系统使用中最常见问题的解答</p>

    <el-collapse v-model="activeNames" accordion>
      <el-collapse-item
          v-for="(item, index) in faqList"
          :key="index"
          :name="index"
          :title="item.question"
      >
        <div class="faq-content" v-html="item.answer"></div>
        <div class="faq-extra" v-if="item.tips">
          <el-alert :title="item.tips" type="info" :closable="false" />
        </div>
      </el-collapse-item>
    </el-collapse>

    <div class="faq-contact">
      <h3>没有找到您的问题？</h3>
      <p>请联系我们的客服支持：<el-link type="primary" href="mailto:404 Found@qq.com">404 Found@qq.com</el-link></p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const activeNames = ref(null) // 默认不展开任何项，使用手风琴模式

const faqList = [
  {
    question: '如何创建新的问卷？',
    answer: `
      <ol>
        <li>登录系统后，点击导航栏中的"问卷管理"</li>
        <li>选择"创建问卷"按钮</li>
        <li>从多种问卷类型中选择适合的模板：
          <ul>
            <li>市场调研问卷</li>
            <li>满意度调查</li>
            <li>学术研究问卷</li>
            <li>自定义空白问卷</li>
          </ul>
        </li>
        <li>在编辑器中添加题目，设置必答选项、跳题逻辑等参数</li>
        <li>预览问卷确认无误后，点击"保存并发布"</li>
      </ol>
    `,
    tips: '建议先使用预览功能检查问卷效果再正式发布'
  },
  {
    question: '问卷数据如何导出？',
    answer: `
      <p>导出问卷数据步骤如下：</p>
      <ol>
        <li>进入"数据分析"模块</li>
        <li>在问卷列表中找到目标问卷</li>
        <li>点击右侧的"导出数据"按钮</li>
        <li>选择导出格式：
          <ul>
            <li><strong>Excel</strong> - 适合进一步数据分析</li>
            <li><strong>CSV</strong> - 兼容更多统计软件</li>
            <li><strong>PDF</strong> - 适合打印和存档</li>
          </ul>
        </li>
        <li>设置数据范围（全部数据或筛选后的数据）</li>
        <li>点击"确认导出"下载文件</li>
      </ol>
    `,
    tips: '导出大数据量问卷时可能需要等待几分钟'
  },
  {
    question: '能否多人协作编辑问卷？',
    answer: `
      <p>专业版和企业版用户可以使用团队协作功能：</p>
      <ol>
        <li>进入"团队协作"中心</li>
        <li>点击"邀请成员"按钮</li>
        <li>输入被邀请人的邮箱或从组织目录选择</li>
        <li>设置协作权限：
          <ul>
            <li><strong>编辑者</strong> - 可以修改问卷内容和设置</li>
            <li><strong>审阅者</strong> - 只能查看和评论</li>
            <li><strong>管理员</strong> - 可以管理协作成员</li>
          </ul>
        </li>
        <li>系统会发送邀请邮件给被邀请人</li>
        <li>被邀请人接受后即可开始协作</li>
      </ol>
    `,
    tips: '协作编辑时会实时显示其他成员的编辑状态'
  },
  {
    question: '如何设置问卷的截止时间？',
    answer: `
      <p>设置问卷截止时间的方法：</p>
      <ol>
        <li>在问卷编辑页面，点击右上角的"设置"按钮</li>
        <li>选择"发布时间设置"选项卡</li>
        <li>启用"设置截止时间"选项</li>
        <li>选择日期和时间</li>
        <li>设置截止后的行为：
          <ul>
            <li>自动关闭问卷</li>
            <li>显示自定义消息</li>
            <li>跳转到指定网址</li>
          </ul>
        </li>
        <li>保存设置</li>
      </ol>
    `
  },
  {
    question: '问卷支持哪些题型？',
    answer: `
      <p>系统支持丰富的题型选择：</p>
      <div class="question-types">
        <div>
          <h4>基础题型</h4>
          <ul>
            <li>单选题</li>
            <li>多选题</li>
            <li>填空题</li>
            <li>评分题（1-5星）</li>
          </ul>
        </div>
        <div>
          <h4>高级题型</h4>
          <ul>
            <li>矩阵题</li>
            <li>排序题</li>
            <li>文件上传题</li>
            <li>分页说明文字</li>
          </ul>
        </div>
      </div>
    `,
    tips: '专业版用户可以使用所有高级题型'
  }
]
</script>

<style scoped>
.faq-container {
  max-width: 900px;
  margin: 30px auto;
  padding: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.faq-title {
  color: #303133;
  text-align: center;
  margin-bottom: 10px;
  font-size: 28px;
}

.faq-subtitle {
  color: #606266;
  text-align: center;
  margin-bottom: 30px;
  font-size: 16px;
}

.faq-content {
  line-height: 1.8;
  color: #606266;
  padding: 10px 0;
}

.faq-content ol,
.faq-content ul {
  padding-left: 20px;
  margin: 10px 0;
}

.faq-content li {
  margin-bottom: 8px;
}

.faq-extra {
  margin-top: 15px;
}

.question-types {
  display: flex;
  gap: 40px;
}

.faq-contact {
  margin-top: 40px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
  text-align: center;
}

.faq-contact h3 {
  color: #303133;
  margin-bottom: 10px;
}

:deep(.el-collapse-item__header) {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

:deep(.el-collapse-item__content) {
  padding-bottom: 20px;
}
</style>